<template>
  <el-row :gutter="20">
    <el-col :sm="0" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>
    <el-col :xs="24" :sm="24">
      <appSlide class=" right-item"></appSlide>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="14">
          <processCenter class=" right-item"></processCenter>
        </el-col>
        <el-col :xs="24" :sm="10">
          <calendarHelper class=" right-item"></calendarHelper>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="8">
          <pictureNews class=" right-item"></pictureNews>
        </el-col>
        <el-col :xs="24" :sm="8">
          <noticeNews1 class=" right-item"></noticeNews1>
        </el-col>
        <el-col :xs="24" :sm="8">
          <noticeNews2 class=" right-item"></noticeNews2>
        </el-col>
      </el-row>

    </el-col>
    <el-col :sm="0" class="hidden-xs-only" style="opacity:0;">右侧占位</el-col>
  </el-row>
</template>

<script>
  import 'element-ui/lib/theme-chalk/display.css';
  import appSlide from './appSlide.vue'
  import processCenter from './processCenter.vue'
  import calendarHelper from './calendarHelper.vue'
  import pictureNews from './pictureNews.vue'
  import noticeNews1 from './noticeNews1.vue'
  import noticeNews2 from './noticeNews2.vue'

  export default {
    name: 'workbenchIndex',
    components: {
      appSlide, processCenter, calendarHelper, pictureNews, noticeNews1, noticeNews2
    },
    data() {
      return {
        screenWidth: document.documentElement.clientWidth, //实时屏幕宽度
      }
    },
    computed: {

    },
    created() {
      window.addEventListener('resize', this.screenAdapter)
    },
    mounted() {
      this.$nextTick(function () {
          // 仅在整个视图都被渲染之后才会运行的代码
          this.screenWidth = document.documentElement.clientWidth
        })

    },
    methods: {
      // 屏幕尺寸变化的监听函数
      screenAdapter() {
        this.screenWidth = document.documentElement.clientWidth;
      }

    },
  }
</script>

<style lang="scss" scoped>


  @keyframes clipMe {

    0%,
    100% {
      clip: rect(0px, 806px, 6px, 0px);
    }

    25% {
      clip: rect(0px, 6px, 112px, 0px);
    }

    50% {
      clip: rect(112px, 812px, 112px, 0px);
    }

    75% {
      clip: rect(0px, 812px, 112px, 806px);
    }
  }

  @keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
      transform: translate(-50%, 0);
    }

    40% {
      transform: translate(-50%, -30px);
    }

    60% {
      transform: translate(-50%, -15px);
    }
  }

  .right-item {
    margin-bottom: 10px;
    &:hover {
      box-shadow: 0 .06rem 50px rgba(12,33,63,.12);
      transition: .5s, .5s;
    }
  }

  @media screen and (max-width: 768px) {

  }
</style>
